<template>
  <div id="Content-page">
    <Paging :pagData="[{ name: '数据分析', router: '/analysis' }]" />
    <!-- 头部 -->
    <div class="global-a-grid">
      <div class="top-data" v-for="(item, index) in topData" :key="index">
        <p>{{ item.quantity }}</p>
        <p>{{ item.type }}</p>
      </div>
    </div>
    <!-- 旅游十大人气目的地 -->
    <div class="Top-ten-popularity">
      <div class="below-below">
        <p class="Top-ten-title">十大人气旅游目的地</p>
        <div id="popularity"></div>
      </div>
      <div class="below-below">
        <p class="Top-ten-title">用户性别占比</p>
        <div id="gender"></div>
      </div>
    </div>
    <!-- 最感兴趣旅游城市 -->
    <div class="below-data">
      <!-- 最感兴趣旅游城市 -->
      <div class="below-below">
        <p class="Top-ten-title">八大最感兴趣旅游城市排名</p>
        <div class="below-title global-display global-j-content global-a-items">
          <p>城市</p>
          <p>人气</p>
        </div>
        <div
          class="below-city global-display global-j-content global-a-items"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="heat-image global-display global-a-items">
            <img :src="item.cover_image.url" />
            <p>{{ item.city }}</p>
          </div>
          <div>{{ item.count }}</div>
        </div>
      </div>
      <!-- 词云图 -->
      <div class="below-below">
        <p class="Top-ten-title">词云图(用户兴趣标签)</p>
        <div id="wordcloud"></div>
      </div>
    </div>
    <!-- 高度 -->
    <div style="height: 200px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
// 顶部导航组件
import Paging from '@/page/components/Paging-component.vue'
import { Column, WordCloud, Pie } from '@antv/g2plot'
import {
  getHotCityAPI,
  getUserGenderRatioAPI,
  getUserCountAPI,
  getMostInterestedCityAPI,
  getWordCloudAPI,
} from '@/api/data-analysis'
import type { MostInterestedCityItemResponse } from '@/type/data-analysis'
// 顶部
const topData = ref<{ type: string; quantity: number }[]>([])
// 最感兴趣热门城市
const tableData = ref<MostInterestedCityItemResponse[]>([])
// 各canvas实例
const PIEPLOT = ref()
const COLUMNPLOT = ref()
const WORDCLOUD = ref()
onMounted(async () => {
  // 1,顶部游记和用户数据
  const Aa = await getUserCountAPI()
  const { userCount, newUserCount, travelsCount, theSameDayTCount } = Aa.data
  topData.value = [
    {
      type: '累计注册用户',
      quantity: userCount,
    },
    {
      type: '昨日新增用户',
      quantity: newUserCount,
    },
    {
      type: '发布游记数量',
      quantity: travelsCount,
    },
    {
      type: '今日发布游记',
      quantity: theSameDayTCount,
    },
  ]
  // 2,旅游十大人气目的地
  const Ab = await getHotCityAPI()
  console.log(Ab)
  // 3，性别占比
  const Ae = await getUserGenderRatioAPI()
  const piePlot = new Pie('gender', {
    appendPadding: 40,
    data: Ae.data,
    angleField: 'count',
    colorField: '_id',
    radius: 0.9,
    color: ['#af9bff', '#ffca0a'],
    label: {
      type: 'inner',
      offset: '-30%',
      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [{ type: 'element-active' }],
  })
  piePlot.render()
  PIEPLOT.value = piePlot
  // 3，最感兴趣旅游城市排名
  const Ac = await getMostInterestedCityAPI()
  tableData.value = Ac.data
  const columnPlot = new Column('popularity', {
    data: Ab.data,
    xField: '_id',
    yField: 'count',
    padding: 30,
    maxColumnWidth: 20,
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      _id: {
        alias: '城市',
      },
      count: {
        alias: '人气',
      },
    },
  })
  columnPlot.render()
  COLUMNPLOT.value = columnPlot
  // 4，词云图
  const Ad = await getWordCloudAPI()
  const wordCloud = new WordCloud('wordcloud', {
    data: Ad.data,
    spiral: 'rectangular',
    wordField: 'city',
    weightField: 'count',
    colorField: 'city',
    wordStyle: {
      rotation: 0,
    },
  })
  wordCloud.render()
  WORDCLOUD.value = wordCloud
})

// 销毁canvas
onBeforeUnmount(() => {
  PIEPLOT.value.destroy()
  COLUMNPLOT.value.destroy()
  WORDCLOUD.value.destroy()
})
</script>

<style scoped>
/* 旅游主题色与卡片风格 */
#Content-page {
  --color-primary: #2db7f5; /* 天空蓝 */
  --color-secondary: #ffa940; /* 日落橙 */
  --color-accent: #23c4a9; /* 海岸绿 */
  --color-surface: #ffffff;
  --color-muted: #8c8c8c;
  --card-radius: 12px;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #f2fbff 0%, #ffffff 60%);
}

/* 顶部数据卡片区域 */
.global-a-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 10px 0 12px;
}

.top-data {
  background-color: var(--color-surface);
  border-radius: var(--card-radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.top-data::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.top-data::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140px 140px at 110% -10%, rgba(45, 183, 245, 0.16), transparent 60%),
    radial-gradient(140px 140px at -10% 110%, rgba(35, 196, 169, 0.14), transparent 60%);
  pointer-events: none;
}

.top-data:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.top-data p:nth-child(1) {
  font-size: 26px;
  font-weight: 800;
  padding-bottom: 8px;
  color: #1f2d3d;
}

.top-data p:nth-child(2) {
  color: var(--color-muted);
}

/* 双栏：人气目的地 与 性别占比 */
.Top-ten-popularity {
  display: grid;
  grid-template-columns: 60% calc(40% - 10px);
  grid-gap: 12px;
  margin: 10px 0 14px;
}

.Top-ten-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  padding: 12px 14px 4px;
}

.Top-ten-title::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}

/* 通用卡片容器 */
.below-below {
  background-color: var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding-bottom: 12px;
}

/* 图表容器固定高度，避免初次渲染塌陷 */
#popularity,
#gender,
#wordcloud {
  height: 360px;
  margin: 0 14px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(45, 183, 245, 0.06), rgba(35, 196, 169, 0.04));
}

/* 最感兴趣城市列表 */
.below-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
}

.below-title {
  padding: 10px 14px;
  color: var(--color-muted);
  border-bottom: 1px dashed #eef2f6;
}

.below-city {
  padding: 12px 14px;
  border-bottom: 1px solid #f2f4f7;
  transition: background-color 0.2s ease;
}

.below-city:hover {
  background-color: #f9fcff;
}

.heat-image img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: block;
  margin-right: 10px;
  object-fit: cover;
  border: 1px solid #eef2f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .global-a-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .Top-ten-popularity {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .global-a-grid {
    grid-template-columns: 1fr;
  }
  .below-data {
    grid-template-columns: 1fr;
  }
  #popularity,
  #gender,
  #wordcloud {
    height: 300px;
  }
}

/* 专属：八大最感兴趣旅游城市排名 布局修复 */
.below-data .below-below .below-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.below-data .below-below .below-title p:first-child {
  text-align: left;
}

.below-data .below-below .below-title p:last-child {
  text-align: right;
  color: #4b5563;
}

.below-data .below-below .below-city {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.below-data .below-below .below-city:last-child {
  border-bottom: none;
}

.below-data .below-below .below-city .heat-image {
  display: flex;
  align-items: center;
  gap: 10px;
}

.below-data .below-below .below-city .heat-image p {
  font-weight: 600;
  color: #111827;
}

.below-data .below-below .below-city > div:last-child {
  justify-self: end;
  font-weight: 700;
  color: #1f2d3d;
}
</style>
